<template>
  <v-layout type="main">
    <!-- <p class="page-title">我的发布 - {{ pageTitle[$route.query.active] }}</p> -->
    <div class="detail-box" v-if="!$route.meta.hideDetails">
      <div class="pic">
        <v-image :src="detailData.avatar" alt="" />
      </div>
      <div class="word">
        <h3 class="title">
          {{ detailData.name }} 版本：{{ version.version }}
          <el-button class="back" type="text" icon="el-icon-right" @click="$router.push({ path: '/my_market' })" />
        </h3>
        <p class="hint">{{ detailData.desc }}</p>
      </div>
    </div>

    <!-- <el-radio-group v-model="nowRouter" size="medium" @change="skip" class="nav-alike" v-show="!$route.meta.hideDetails">
      <el-radio-button :label="e.name" v-for="(e, i) in thisRouter" :key="i">
        <span class="nav-alike-item">{{ e.meta.title }}</span>
      </el-radio-button>
    </el-radio-group> -->

    <el-tabs v-model="nowRouter" @tab-click="skip">
      <el-tab-pane :label="e.meta.title" :name="e.name" v-for="(e, i) in thisRouter" :key="i" />
    </el-tabs>

    <div :class="['layout-content', { 'layout-content-nodetail': $route.meta.hideDetails }]">
      <router-view class="content-detail" :version="version" :detailData="detailData" :source="source" :active="active"
        v-if="ready" />
    </div>
  </v-layout>
</template>

<script>

import { getMarketAlgorithmDetail } from '@/api/marketAlgorithm'
import { getMarketAlgorithmVersionDetail } from '@/api/marketAlgorithmVersion'

export default {
  data() {
    return {
      nowRouter: this.$route.name,
      thisRouter: [],
      detailData: {},
      source: null,
      versionOptions: [],
      version: {},
      active: this.$route.query.active,
      id: this.$route.query.id,
      ready: false,
      pageTitle: {
        '0': '数据集',
        '1': '算法',
        '2': '模型',
      }
    };
  },
  methods: {
    skip() {
      let path = `/my_algorithm/${this.thisRouter.filter(e => e.name == this.nowRouter)[0].path}`
      if (path == this.$route.path) return
      this.$router.push({
        path,
        query: {
          ...this.$route.query
        }
      })
    },
    async getVersions() {

      let ret = await getMarketAlgorithmVersionDetail({ id: this.$route.query.version_id })
      this.version = ret.data

      this.ready = true
    },

    async getDetail() {
      if (this.$route.query.id) {
        console.log('active', this.active)

        let res = await getMarketAlgorithmDetail({ id: this.$route.query.id })
        this.detailData = res.data

      }
      return
    },

  },
  async mounted() {
    let temp = this.$router.options.routes.filter(
      e => e.name == 'my_algorithm' && e.children
    )
    console.log('query', this.$route.query)
    this.thisRouter = temp[0].children.filter(e => !e.meta.hideDetails)
    await this.getDetail()
    this.getVersions()
  },

  destroyed() {

  },
}
</script>
<style lang="less" scoped>
@import "~@/assets/css/detail-layout.less";
</style>